<!--展示首页内容  -->
<template>
  <div class="home-container">
    <div class="wrap" ref="editor">
      <div class="top d-flex ">
        <div class="flex-1">
          <dv-decoration-10 class="flex-1" style="width: 100%; height:0.25rem;" />
          <div class="parallelogram-right bg-info" style="width: 50%; text-align: left;">
            <!-- <span class="parallelogram-before bg-info"></span> -->
            <div class="text color-white">首页</div>
          </div>
          <div class="parallelogram-right bg-info" style="width: 30%; text-align: left;">
            <div class="text color-white">
              <a href="http://www.boraydata.cn/" target="_blank">大展宏图队</a>
            </div>
          </div>
        </div>
        <div class="flex-2 d-flex">
          <dv-decoration-8 class="flex-1" style="width:100%;height:50px;" :color="['#00C2FF','#00C2FF']" />
          <div class="top-title flex-2">
            <h2 class="color-top" @click="goRefresh">睿图综合信息展示平台</h2>
          </div>
          <dv-decoration-8 :reverse="true" class="flex-1" :color="['#00C2FF','#00C2FF']"
            style="width:100%;height:50px;" />
        </div>
        <div class="flex-1">
          <dv-decoration-10 style="width: 100%; height:0.25rem; transform:rotate(180deg);" />
          <div class="parallelogram-left bg-info" style="width: 30%; text-align: left;">
            <div class="text color-white">
              <a href="http://www.boraydata.cn/" target="_blank">关于我们</a>
            </div>
          </div>
          <div class="parallelogram-left bg-info" style="width: 50%; text-align: left;">

            <div class="text color-white">
              <div class="showTime">
                <span class="time">{{ nowTime }}</span>
                <span class="date">
                  <span>{{ week }}</span>
                  <span>{{ date }}</span>
                </span>
              </div>
            </div>
            <!-- <span class="parallelogram-after bg-info"></span> -->
          </div>

        </div>
      </div>

      <div class="body-box">
        <!-- 中间三行 -->
        <div class="middle d-flex">
          <div class="flex-1">
            <sinan />
          </div>
          <div class="flex-1">
            <pyramid />
          </div>
          <div class="flex-1">
            <seamless />
          </div>
        </div>
        <div class="bottom">
          <div class="flex-1">
            <!-- <szbar /> -->
            <lineEchart />
          </div>
          <div class="flex-1">
            <nightingale />
            <global3DEchart />
          </div>
        </div>

      </div>
    </div>

  </div>


</template>

<script>
  import sinan from '@/components/sinan'
  import pyramid from '@/components/pyramid'
  import seamless from '@/components/seamless'
  import lineEchart from '@/components/line'
  import nightingale from '@/components/nightingale'
  import global3DEchart from '@/components/global3D'

  export default {
    name: 'VueHome',
    components: {
      sinan,
      pyramid,
      seamless,
      lineEchart,
      nightingale,
      global3DEchart
    },
    inject: ["reload"],
    data() {
      return {
        nowTime: '',
        week: '',
        date: ''
      }
    },
    mounted() {
      this.nowTimes();
    },
    methods: {
      timeFormate(timeStamp) { //显示当前时间
        let newDate = new Date(timeStamp);
        let year = newDate.getFullYear();
        let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
        let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
        let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
        let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
        let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
        let week = newDate.getDay();
        let weeks = ['日', '一', '二', '三', '四', '五', '六'];
        let getWeek = '星期' + weeks[week];
        this.week = getWeek;
        this.date = year + '.' + month + '.' + date;
        this.nowTime = hh + ':' + mm + ':' + ss;
      },
      nowTimes() {
        this.timeFormate(new Date());
        setInterval(this.nowTimes, 1000);
        this.clear();
      },
      clear() {
        clearInterval(this.nowTimes)
        this.nowTimes = null;
      },
      //页面刷新
      goRefresh() {
        // this.reload();
      }
    }

  }
</script>
<style lang="scss" scoped>
  .home-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 1.2rem 1.2rem 1.2rem 1.2rem;
    background: url(../assets/img/bj.jpg) no-repeat;
    background-size: cover;
    background-position: 50% 0;
    background-color: rgb(0, 0, 0);
    box-sizing: border-box;

    .wrap {
      transform-origin: 0px 0px 0px;
      min-width: auto;
      width: 100%;
      min-height: auto;
      height: 100%;
      overflow: auto;
    }

    .top {
      height: 4rem;
      font-size: 1.15rem;

      .top-title {
        h2 {
          line-height: 60px;
          font-size: calc(100vw * 30 / 1706);
        }
      }

      .text {
        font-size: calc(100vw * 18 / 1706);
        cursor: pointer;

        a{
          color: #fff;
        }
      }
    }

    .showTime {
      line-height: 1;

      .time {
        line-height: 1rem;
        margin-right: 1.18rem;
        display: inline-block;
        font-size: calc(100vw * 20 / 1706);
      }

      .date {
        display: inline-block;
        font-size: 0.75rem;
        line-height: 1rem;

        span {
          text-align: left;
          display: block;
        }
      }
    }

    .body-box {
      padding: 1rem 0rem;
      width: 100%;
      height: calc(100% - 6.4rem);
    }

    .middle {
      width: 100%;
      height: 50%;
      position: relative;
    }

    .bottom {
      width: 100%;
      height: 49%;
      margin-top: 1%;
      position: relative;
    }
  }
</style>